<!DOCTYPE>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('房源管理新增编辑界面')" />
</head>
<body>
<form class="layui-form layui-form-pane" id="dataForm" style="margin: 10px;">
    <input type="hidden" th:value="${home.id}" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">房源</label>
        <div class="layui-input-inline">
           <select name="xqId" id="xqId" lay-filter="xq">
               <option value="">请选择小区</option>
           </select>
        </div>
        <div class="layui-input-inline">
            <select name="lhId" id="lhId" lay-filter="lh">
                <option value="">请选择楼号</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="fhId" id="fhId" lay-filter="fh">
                <option value="">请选择房号</option>
            </select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">建筑面积</label>
        <div class="layui-input-inline">
            <input type="text" id="area" name="area" placeholder="请输入建筑面积"
                   class="layui-input" th:value="${home.area}"/>
        </div>
        <div class="layui-form-mid layui-word-aux">
            m<sup>2</sup>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">使用面积</label>
        <div class="layui-input-inline">
            <input type="text" name="useArea" placeholder="请输入使用" class="layui-input" th:value="${home.useArea}"/>
        </div>
        <div class="layui-form-mid layui-word-aux">

            m<sup>2</sup>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">户型:</label>
        <div class="layui-input-inline">
            <select name="hx">
                <option></option>
                <option value="一室一厅一卫" th:selected="${home.hx == '一室一厅一卫'}">一室一厅一卫</option>
                <option value="二室一厅一卫" th:selected="${home.hx == '二室一厅一卫'}">二室一厅一卫</option>
                <option value="三室二厅二卫" th:selected="${home.hx == '三室二厅二卫'}">三室二厅二卫</option>
                <option value="四室二厅二卫" th:selected="${home.hx == '四室二厅二卫'}">四室二厅二卫</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">建筑结构:</label>
        <div class="layui-input-inline">
            <select name="jzjg">
                <option></option>
                <option value="混泥土" th:selected="${home.jzjg =='混泥土'}">混泥土</option>
                <option value="框架" th:selected="${home.jzjg =='框架'}">框架</option>
                <option value="剪力框架" th:selected="${home.jzjg =='剪力框架'}">剪力框架</option>
                <option value="铁棚" th:selected="${home.jzjg =='铁棚'}">铁棚</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">租赁性质:</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="小区" title="小区" th:checked="${home.type=='小区'}">
            <input type="radio" name="type" value="公租房" title="公租房" th:checked="${home.type=='公租房'}">
            <input type="radio" name="type" value="廉租房" title="廉租房" th:checked="${home.type=='廉租房'}">
            <input type="radio" name="type" value="城中村" title="城中村" th:checked="${home.type=='城中村'}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态:</label>
        <div class="layui-input-inline">
            <select name="status">
                <option></option>
                <option value="建成待租" th:selected="${home.status == '建成待租'}">建成待租</option>
                <option value="在建" th:selected="${home.status == '在建'}">在建</option>
                <option value="其他" th:selected="${home.status == '其他'}">其他</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">建成时间</label>
        <div class="layui-input-inline">
            <input type="text" name="strDate" id="buildDate" th:value="${#dates.format(home.buildDate,'yyyy-MM-dd')}"  placeholder="yyyy-MM-dd"  class="layui-input"/>
        </div>
    </div>
</form>
<script>
    var form;
    layui.use(['form','laydate'],function(){
        form = layui.form;
        areaSelect(0,'xqId');

        var laydate = layui.laydate;
        laydate.render({
            elem:'#test1',
            trigger:'click',
            change:function (v,d,ed) {
                
            }
        });
        form.on('select(xq)',function (data) {//小区的下拉
            emptySelect('xq');
            form.render('select');//重载下拉框
            var parentId = data.value;
            if(parentId==''){return false;}
            areaSelect(parentId,'lhId');
        });
        form.on('select(lh)',function (data) {//楼号的下拉
            emptySelect('lh');
            form.render('select');//重载下拉框
            var parentId = data.value;
            if(parentId==''){return false;}
            areaSelect(parentId,'fhId');
        });
    });
    function emptySelect(id){
        if(id=='xq') {
            //清空下拉框
            $('#lhId').empty();
            //初始化第一个选择
            $('#lhId').append(new Option('请选择楼号', ''));
        }
        //清空下拉框
        $('#fhId').empty();
        //初始化第一个选择
        $('#fhId').append(new Option('请选择房号', ''));
    }
    function areaSelect(parentId,id) {
        var url = '/ac/findSelect?parentId='+parentId;
        $.post(url,function(data){
            $.each(data,function(i,item){
               var option = "<option value='"+item.id+"'>"+item.name+"</option>";
               $('#'+id).append(option);
            });
            $('#'+id).select().val(1);
            form.render('select');//重载下拉框

        });

    }
</script>
</body>
</html>
